<template>
  <view class="container">
    <view class="certificate-info">
      <view
        class="info-row"
        v-for="(value, key) in certificateInfo"
        :key="key"
        :style="{
          height: [
            'qualificationName',
            'issuingAuthority',
            'inquiryDate',
          ].includes(key)
            ? '50px'
            : '10px',
        }"
      >
        <text class="label">{{ labels[key] }}</text>
        <text
          class="value"
          :style="{ color: value === '有效' ? 'green' : '#0d1444' }"
        >
          {{ value }}
        </text>
      </view>
      <button class="close-button">关闭</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 固定的标签文本
      labels: {
        birthDate: "出生日期",
        licenseDuration: "驾照有效期限(年)",
        licenseIssueDate: "驾照初领日期",
        licenseExpiryDate: "驾照有效期止",
        qualificationName: "从业资格名称",
        qualificationNumber: "从业资格号",
        documentStatus: "证件状态",
        qualificationIssueDate: "从业资格证初领日期",
        qualificationStartDate: "从业资格证有效期始",
        qualificationEndDate: "从业资格证有效期止",
        employmentStatus: "从业状态",
        issuingAuthority: "发证机构名称",
        inquiryDate: "查询日期",
      },
      certificateInfo: {
        birthDate: "1982-08-24",
        licenseDuration: "10",
        licenseIssueDate: "2015-11-16",
        licenseExpiryDate: "2031-11-16",
        qualificationName: "网络预约出租汽车驾驶员",
        qualificationNumber: "421087198208241316",
        documentStatus: "有效",
        qualificationIssueDate: "2024-10-17",
        qualificationStartDate: "2024-10-17",
        qualificationEndDate: "2042-08-24",
        employmentStatus: "待业",
        issuingAuthority: "荆州市交通运输局",
        inquiryDate: "2024-10-19 15:30:19",
      },
    };
  },
};
</script>

<style scoped lang="scss">
.container {
  background-color: #f3f6fa;
  padding: 0;
  min-height: 100vh;
  box-sizing: border-box;
  position: relative;
}

.certificate-info {
  background-color: #fff;
  width: 100vw;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  .info-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 600px;
    margin-bottom: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #eaeaea;
    .label {
      color: #79829c;
      font-size: 14px;
      line-height: 1.5;
    }
  }
}

.value {
  color: #0d1444;
  font-size: 14px;
  line-height: 1.5;
}

.close-button {
  margin-top: 20px;
  height: 40px;
  width: 100%;
  background-color: #3c78ff;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  border: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.next-button {
  position: fixed;
  top: 10px;
  left: 10px;
  height: 30px;
  width: 100%;
  background-color: #d3d3d3;
  color: #000;
  border-radius: 5px;
  text-align: center;
  font-size: 12px;
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
